<template>
  <div class="infomanage-box">
    <el-card class="box-card">
        <div style="width: 100%;height: 30px;text-align:left;margin-bottom: 30px;border-bottom-style: dashed;border-bottom-width: 1px">
			<img style="width:40px;height: 100%;float:left" class="back-img" @click="goBack()" src="../../assets/info/back.svg" alt="">
			<span style="text-align: left;font-weight: 700;float:left">新闻管理</span>
		</div>
        <el-table :data="news.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" height="420">
			<!-- 新闻文章标题 -->
            <el-table-column prop="title" label="新闻标题" width="450">
                <template v-slot="scope">
					<el-popover
						placement="right"
						title="标题"
						:width="400"
						trigger="hover"
						:content="scope.row.title"
					>
						<template #reference>
							<div class="title-div">
								<span>{{scope.row.title}}</span>
							</div>
						</template>
					</el-popover>
				</template>
            </el-table-column>
            <el-table-column prop="time" label="发布时间"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template v-slot="scope">
					<!-- 编辑按钮 -->
                    <el-button size="mini" @click="editArticle(scope.row.id, scope.row.title, scope.row.content)">编辑</el-button>

					<!-- 确认删除通知提示 -->
					<el-popconfirm
                        confirm-button-text="是"
                        cancel-button-text="否"
                        icon-color="red"
                        title="确认删除此新闻?"
                        @confirm="confirmDeleteNew(scope.row.id,scope.row.title)"
                    >
                        <template #reference>
                            <el-button type="danger" size="mini">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
		</el-table>
		<div class="block" style="margin-top:15px;">
			<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="news.length">
			</el-pagination>
		</div>

		<!-- 编辑文章框 -->
        <el-dialog
            v-model="editDialogVisible"
            title="编辑"
            width="60%"
        >
            <el-form style="width: 100%" :model="editForm">
                <el-form-item label="标题">
                    <el-input v-model="editForm.title" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="editForm.content" type="textarea" rows="10" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmEdit()">修改</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>

import {ElMessage } from 'element-plus'

import request from '../../utils/request'

export default {
	data() {
		return {
			news: [],
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			pageSize: 7, // 每页的数据条数
			deleteForm: {
				title: '',
				id: 0
			},
			editDialogVisible: false,
			editForm: {
				id: 0,
				title: '',
				content: ''
			}
		}
	},
	created() {
		this.getNews();
	},
	methods: {
		goBack() {
			window.history.back(-1);
		},
		//每页条数改变时触发 选择一页显示多少行
		handleSizeChange(val) {
			this.currentPage = 1;
			this.pageSize = val;
		},
		//当前页改变时触发 跳转其他页
		handleCurrentChange(val) {
			this.currentPage = val;
		},
		// 获取新闻
		getNews() {
			request({
				method: 'get',
				url: '/api/school-information/select'
			}).then(res => {
				let code = res.code;
				if (code === 200) {
					this.news = res.data;
					this.total = this.news.length;
				} else if (code === 404) {
					this.$router.push('/dist/error404')
				}
			})
		},
		// 确认删除
		confirmDeleteNew(id,title) {
			this.deleteForm.id = id;
			this.deleteForm.title = title;
			request({
				method: 'delete',
				url: '/api/school-information/delete',
				data: this.deleteForm
			}).then(res => {
				if (res.code === 200) {
					ElMessage.success('删除成功！');
					this.getNews();
				} else {
					ElMessage.warning('删除失败！');
				}
			})
		},
		// 编辑信息
		editArticle(id, title, content) {
			this.editForm.id = id;
			this.editForm.title = title;
			this.editForm.content = content;
			this.editDialogVisible = true;
		},
		// 确认更新
		confirmEdit() {
			request({
				method: 'post',
				url: '/api/school-information/updateInformation',
				data: this.editForm
			}).then(res => {
				if (res.code === 200) {
					ElMessage.success('修改成功');
					this.editDialogVisible = false;
				} else {
					ElMessage.error('修改失败，请重试。');
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.infomanage-box {
    width: 100%;
    height: 100%;
}

.box-card {
    width: 100%;
    height: 100%;
}

.back-img:hover {
	cursor: pointer;
}

.title-div {
	width: 400px;
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}

.title-div:hover {
	cursor: pointer;
}
</style>
